<template>
	<div v-if="data.show" :class="layerClass">
		<div class="layer-mask" v-if="data.maskClose" @click="close"></div>
		<div class="layer-mask" v-else></div>
		<div class="layer">
			<div class="layer-box">
				<div class="layer-header" v-if="data.title">
					<div class="title">{{data.title}}</div>
					<!-- <a class="close" @click="close">×</a> -->
				</div>
				<div class="layer-body">
					<p class="tips" v-if="data.tips">{{data.tips}}</p>
					<slot></slot>
				</div>
				<div class="layer-footer" v-if="btns&&btns.length">
					<button v-if="btns.length==1" @click.prevent="close">{{btns[0]}}</button>
					<button v-if="btns.length==2" class="btn-cancel" @click.prevent="close">{{btns[0]}}</button>
					<button v-if="btns.length==2" @click.prevent="ok">{{btns[1]}}</button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	/*
	* data.flag {Boolean}     是否是tips
	* data.title {String}    标题
	* data.tips  {String}    提示内容
	* data.btns  {String}    按钮长度
	* data.maskClose {Boolean}  点击遮罩层关闭
	*/
	export default {
		name: 'layer',
		props: {
			data: Object
		},
		data() {
			return {
				index: 1
			}
		},
		computed: {
			layerClass() {
				if (this.data.flag) {
					return 'layer-tips'
				}
				else {
					return ''
				}
			},
			btns() {
				if (this.data.btns) {
					return this.data.btns
				}
				else {
					return ['取消', '确定']
				}
			}
		},
		methods: {
			close() {
				this.data.show = false
				this.$emit('on-cancel')
			},
			ok() {
				this.$emit('on-ok')
			}
		}
	};
</script>